<template>
    <div class="index table-page page">
        <!--        <H3 style="margin-left: 20px;margin-top: 20px;">-->
        <!--            {{ getTimeState() }}-->
        <!--        </H3>-->
        <!--        <admin-index v-if="'admin' === maxRole"></admin-index>-->
        <!--        <teacher-index v-if="'teacher' === maxRole" :user-id="userId"></teacher-index>-->
        <!--        <agent-index v-if="'agent' === maxRole" :user-id="userId"></agent-index>-->
        <!--        <channel-index v-if="'channelBusiness' === maxRole" :user-id="userId"></channel-index>-->
        <!--        <agent-index  :user-id="userId"></agent-index>-->
        <!--        <teacher-index  :user-id="userId"></teacher-index>-->
        <!--        <channel-index  :user-id="userId"></channel-index>-->

        <!--顶部-->
        <div class="top">
            <!--我的余额-->
            <div class="search-item top-text">
                <div>我的余额：</div>
                <div class="number">{{parseFloat(balance).toFixed(2)}}</div>
                <div class="text-left">元</div>
            </div>
            <!--消费总额-->
            <div class="search-item top-text">
                <div>消费总额：</div>
                <div class="number">{{parseFloat(total).toFixed(2)}}</div>
                <div class="text-left">元</div>
            </div>
            <!--充值金额-->
            <div class="search-item top-text">
                <div>充值金额：</div>
                <div class="number">{{parseFloat(Recharge).toFixed(2)}}</div>
                <div class="text-left">元</div>
            </div>
            <!--退款金额-->
            <div class="search-item top-text">
                <div>退款金额：</div>
                <div class="number">{{parseFloat(refund).toFixed(2)}}</div>
                <div class="text-left">元</div>
            </div>
        </div>

        <!--显示区域-->
        <div class="page-bottom">
            <!--左边(柱状图)-->
            <div class="page-bottom-left">
                <!--标题-->
                <div class="title-text">开课数量统计</div>
                <!--按钮-->
                <div class="left-button">
                    <el-button-group>
                        <!--近一周-->
                        <el-button :type="buttonClick[0]" autofocus="autofocus" size="small" @click="buttonClickData(0)">近一周</el-button>
                        <!--本月-->
                        <el-button :type="buttonClick[1]" size="small" @click="buttonClickData(1)">本月</el-button>
                        <!--本年-->
                        <el-button :type="buttonClick[2]" size="small" @click="buttonClickData(2)">本年</el-button>
                        <!--全部-->
                        <el-button :type="buttonClick[3]" size="small" @click="buttonClickData(3)">全部</el-button>
                    </el-button-group>
                </div>
                <!--柱状图-->
                <div v-if="isShowHistogram">
                    <div id="class-histogram" ref="histogram" class="left-histogram"></div>
                </div>
                <div v-else class="left-histogram"><div class="histogram-text">暂无开课</div></div>
                <!--今日开课-->
                <div class="left-tips">
                    <div class="tips-text">今日开课&nbsp;:&nbsp;</div>{{toDayClass}}
                </div>
                <!--开课总数-->
                <div class="left-tips">
                    <div class="tips-text">开课总数&nbsp;:&nbsp;</div>{{classStartTotal}}
                </div>

            </div>

            <!--竖线-->
            <!--            <div class="vertical"></div>-->

            <!--右边(列表)-->
            <div class="page-bottom-right vertical">
                <!--标题-->
                <div class="title-text right-title">系统公告</div>
                <!--表格-->
                <div class="right-table">
                    <el-table
                        :data="table"
                        height="52vh"
                        show-header="show-header"
                        size="mini"
                        style="width: 100%"
                        @row-click="tableRowClick"
                    >
                        <el-table-column
                            prop="title"
                            show-overflow-tooltip="show-overflow-tooltip"
                        ></el-table-column>

                        <el-table-column
                            prop="publishTime"
                            width="150"
                            show-overflow-tooltip="show-overflow-tooltip"
                        ></el-table-column>

                    </el-table>
                </div>
                <!--分页-->
                <div v-if="tableData.total" class="xy-between table-page-box">
                    <el-pagination
                        small
                        background
                        layout="total, prev, pager, next, jumper"
                        :total="tableData.total"
                        :page-size="tableData.size"
                        :current-page.sync="tableData.current"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>

            </div>

        </div>

        <!--弹窗显示公告内容-->
        <el-dialog
            title="详情"
            :visible.sync="isDialogAgent"
        >

            <!--表单-->
            <el-form
                :model="agentFrom"
                size="mini"
                label-position="left"
            >
                <!--公告标题-->
                <el-form-item label="公告标题" :label-width="formLabelWidth">
                    <el-input v-model="agentFrom.title" disabled></el-input>
                </el-form-item>
                <!--公告详情-->
                <el-form-item label="公告详情" :label-width="formLabelWidth">
                    <el-input
                        v-model="agentFrom.content"
                        type="textarea"
                        :autosize="{ minRows: 6}"
                        disabled
                    ></el-input>
                </el-form-item>
                <!--创建人-->
                <el-form-item label="创建人" :label-width="formLabelWidth">
                    <el-input v-model="agentFrom.createdBy" disabled></el-input>
                </el-form-item>
                <!--发布时间-->
                <el-form-item label="发布时间" :label-width="formLabelWidth">
                    <el-input v-model="agentFrom.modifyTime" disabled></el-input>
                </el-form-item>
            </el-form>

            <!--按钮-->
            <div slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="isDialogAgent = false">确定</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
import {VuePage} from "@/layout/mixin/iVue";
import {mapState} from "vuex";
import adminIndex from "@/views/models/admin"
import teacherIndex from "@/views/models/teacher"
import agentIndex from "@/views/models/agent"
import channelIndex from "@/views/models/channel"
import {get} from "@/api/request"

export default {
    name: "Index",
    components: {adminIndex,teacherIndex,agentIndex,channelIndex},
    mixins: [VuePage],
    data() {
        return {
            roleName:"",
            userId : null,
            maxRole: "",
            balance: 0,//我的余额
            total: 0, //消费总额
            Recharge: 0,//充值金额
            refund: 0,//退款金额
            table: [//公告表格数据
                {"content":"2ssssss","modifyTime":"22222222222"},
            ],
            tableData:{//公告分页
                "total": 100,
                "current": 1,
                "size":10,
            },
            buttonClick: ["primary","","",""],//按钮显示样式数组
            toDayClass: 0,//今日开课数
            classStartTotal: 0,//开课总数
            classStartData: [],//开课对应时间
            classStartNumber: [],//开课对应数量
            dateTypes: ["WEEK", "MONTH", "YEAR", "ALL"],//表示查询统计数量的日期
            isDialogAgent: false,//是否显示公告详情
            agentFrom:{//公告内容
                title: "标题",
                content: "内容",
                createdBy: "创建人",
                modifyTime: "修改时间",
                status: "true",
            },
            formLabelWidth: "70px",//表单标题宽度
            isShowHistogram: true,//是否显示柱状图
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.currentUser,
            userRole: state => state.user,
        })
    },
    created() {
        this.getCurrentUserMaxRole();
        //请求代理商公告
        this.getAgentNoticeList();
        //获取金额
        this.getMoneyQuota();
        //获取开课添加数量
        this.getClassStartNumber(this.dateTypes[0]);
    },
    mounted() {
        //初始化柱状图
        // this.loadingHistogram(true);

    },
    methods: {
        getCurrentUserMaxRole() {
            this.userId = this.userInfo.id;
            // this.userId = "1462705118964088832";
            if ((this.userInfo.userTypes.includes("admin")) || this.userRole.roles.includes("maxAdmin")) {
                this.roleName=" 管理员";
                this.maxRole = "admin";
            } else if (this.userInfo.userTypes.includes("teacher")) {
                this.roleName=" 老师";
                this.maxRole = "teacher";
            } else if (this.userInfo.userTypes.includes("agent")) {
                this.roleName=" 代理商";
                this.maxRole = "agent";
            } else if (this.userInfo.userTypes.includes("channelBusiness")) {
                this.roleName=" 渠道商";
                this.maxRole = "channelBusiness";
            }
        },
        getTimeState() {
            // 获取当前时间
            let timeNow = new Date();
            // 获取当前小时
            let hours = timeNow.getHours();
            // 设置默认文字
            let state = "";
            // 判断当前时间段
            if (hours >= 0 && hours <= 10) {
                state = "早上好! ";
            } else if (hours > 10 && hours <= 14) {
                state = "中午好! ";
            } else if (hours > 14 && hours <= 18) {
                state = "下午好!";
            } else if (hours > 18 && hours <= 24) {
                state = "晚上好! ";
            }
            return state + this.userInfo.name + this.roleName;

        },

        //请求代理商公告方法
        getAgentNoticeList(){

            get("/user/cu/agent/notice/page",{"size": this.tableData.size, "current": this.tableData.current, "status": 1}).then(res => {
                // console.log("res===",res);
                this.tableData = res;
                this.table = res.records;
            });

        },

        //获取金额的请求方法
        getMoneyQuota(){

            get("/user/cu/agent/user/index-count",{all:false}).then(quotaRes => {
                // console.log("quotaRes===",quotaRes);
                this.balance = quotaRes.banace/100;//我的余额
                this.total = quotaRes.consum/100;//消费总额
                this.Recharge = quotaRes.total/100;//充值金额
                this.refund = quotaRes.refund/100;//退款金额
            });

        },

        //获取开课数量的请求方法
        getClassStartNumber(dateType){

            get("/user/cu/agent/user/open-sku-record",{"dateType": dateType}).then(numberRes => {
                // console.log("numberRes===",numberRes);
                //今日开课
                this.toDayClass = numberRes.todayMoney;
                //开课总数
                this.classStartTotal = numberRes.allCount;
                //柱状图对应的开课统计
                let dateArr = [];//开课时间对应的数组
                let numberArr = [];//开课数量对应的数组
                for (let i in numberRes.openSkuDateCount) {
                    numberArr.push(numberRes.openSkuDateCount[i]);
                    dateArr.push(i);
                }

                if(dateType === this.dateTypes[2] || dateType === this.dateTypes[3]) {
                    dateArr.splice(0,1);
                    numberArr.splice(0, 1);
                }
                // console.log("dateArr===",dateArr);
                // console.log("numberArr===",numberArr);
                this.classStartData = dateArr;
                this.classStartNumber = numberArr;
                if(this.classStartData.length !== 0 && this.classStartNumber.length !== 0){
                    this.isShowHistogram = true;
                    setTimeout(() => {
                        this.loadingHistogram(false);
                    },0);

                }else {
                    this.isShowHistogram = false;
                }


            });

        },

        //当前页变化时的方法
        handleCurrentChange(current){
            // console.log("当前页",current);

            this.tableData.current = current;
            this.getAgentNoticeList();

        },

        //按钮点击方法(切换时间,)
        buttonClickData(index){
            // console.log("你点击了按钮：",this.dateTypes[index]);

            //将数组清空
            this.buttonClick = this.buttonClick.map(buttonCss => {
                buttonCss = "";
                return buttonCss;
            });

            this.buttonClick[index] = "primary";

            //查询开课数量
            this.getClassStartNumber(this.dateTypes[index]);
            // console.log(this.buttonClick);

        },

        //加载柱状图方法
        loadingHistogram(){
            // console.log("加载柱状图");
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("class-histogram"));

            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                xAxis: {
                    data: this.classStartData,
                    type: "category"
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "开课数量",
                        type: "bar",
                        color: "#3398db",
                        data: this.classStartNumber,
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        },

        //表格被点击方法
        tableRowClick(row){
            // console.log("表格被点击了！");
            // console.log("row===",row);
            this.agentFrom = row;
            this.isDialogAgent = true;
        },

    }
};
</script>
<style lang="scss" scoped>
.index {
    background-color: #fff;
}

//页面
.page{
    padding: 0;
}

//顶部
.top{
    width: 100%;
    //height: 10vh;
    padding-top: 5vh;
    padding-bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    background-color: #3c8bfc;
}

//头部字体
.top-text{
    margin-left: 4vw;
    margin-right: 4vw;
    color: #ffffff;
    display: flex;
    align-items: baseline;
    font-size: 0.7em;
}
.text-left{
    margin-left: 4px;
}
.number{
    font-size: 1.1em;
    font-weight: bold;
}

//页面底部
.page-bottom{
    width: 100%;
    padding: 5vh 3vw 2vh 3vw;
    display: flex;
    //padding-top: 5vh;
    //padding-bottom: 2vh;
    //padding-left: 3vw;
    //padding-right: 3vw;
}

//竖线
.vertical{
    border-left: solid #cccccc 2px;
}

//底部左边
.page-bottom-left{
    width: 44vw;
    padding-right: 3vw;
}

.left-button{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: flex-end;
}

//柱状图
.left-histogram{
    width: 100%;
    height: 40vh;
    margin-bottom: 10vh;

    //暂无开课字体提示
    .histogram-text{
        text-align: center;
        line-height: 40vh;
        font-size: 1em;
    }
}

.left-tips{
    margin-bottom: 2vh;
    display: flex;
    justify-content: flex-start;
    font-size: 0.6em;
}

.tips-text{
    font-weight: bold;
}

//底部右边
.page-bottom-right{
    width: 44vw;
    padding-left: 3vw;
    padding-bottom: 2vh;
}

.right-table{
    margin-bottom: 10vh;
    cursor: pointer;
}

.right-title{
    margin-bottom: 2vh;
}

.title-text{
    font-size: 0.8em;
    font-weight: bold;
}



</style>
